<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>鸡兔同笼问题</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
        }

        h2 {
            text-align: center;
            padding-top: 10px;
        }

        p {
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }

        button {
            display: inline-block;
            margin: 20px auto;
            padding: 10px 20px;
            font-size: 16px;
        }

        input {
            display: inline-block;
            padding: 8px;
            width: 5%;
            font-size: 16px;
            margin: 0 10px;
        }

        #result {
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px dotted gold;
            background-color: rgb(221, 220, 220);
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div class="container">
        <h2>循环解决鸡兔同笼问题</h2>
        <p>鸡兔同笼，鸡兔一共 <input type="number" id="totalAnimals" placeholder="" /> 只。笼子里脚一共 <input type="number"
                id="totalLegs" placeholder="" /> 只，请问分别有多少只鸡和兔？ <button
                onclick="calculateChickensAndRabbits()">计算</button></p>
        <p id="result"></p>
    </div>
    <script>
        function calculateChickensAndRabbits() {
            let totalLegs = document.getElementById('totalLegs').value;
            let totalAnimals = document.getElementById('totalAnimals').value;
            totalLegs = parseInt(totalLegs);
            totalAnimals = parseInt(totalAnimals);

            // 判断输入的有效性
            if (isNaN(totalLegs) || isNaN(totalAnimals) || totalLegs <= 0 || totalAnimals <= 0) {
                document.getElementById('result').textContent = "请输入有效的总数！";
                document.getElementById('result').style.color = "black";  // 设置文本颜色为黑色
                return;
            }

            // 设鸡和兔的脚数分别为 2 和 4
            let chickenLegs = 2;
            let rabbitLegs = 4;

            // 解方程：
            // totalLegs = chickenLegs * chickens + rabbitLegs * rabbits
            // totalAnimals = chickens + rabbits
            // 使用代数方法来计算
            let chickens = (totalLegs - rabbitLegs * totalAnimals) / (chickenLegs - rabbitLegs);
            let rabbits = totalAnimals - chickens;

            // 判断是否为非负整数解
            if (chickens < 0 || rabbits < 0 || !Number.isInteger(chickens) || !Number.isInteger(rabbits)) {
                document.getElementById('result').textContent = "无解";
                document.getElementById('result').style.color = "red";  // 设置文本颜色为红色
            } else {
                document.getElementById('result').textContent = `鸡有 ${chickens} 只，兔有 ${rabbits} 只。`;
                document.getElementById('result').style.color = "blue";  // 设置文本颜色为蓝色
            }
        }
    </script>
</body>

</html>
